<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
</head>
<body>
    
<!-- 
    表单
    所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 
    将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
 -->

<div class="container">

    <!-- 基本使用 -->
    <form>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputFile">File input</label>
          <input type="file" id="exampleInputFile">
          <p class="help-block">Example block-level help text here.</p>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox"> Check me out
          </label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>

    <!-- 内联表单 -->
    <form class="form-inline">
        <div class="form-group">
          <label for="exampleInputName2">Name</label>
          <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail2">Email</label>
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>

    <!-- 水平排列 -->
    <form class="form-horizontal">
        <!-- form-group 相当于 row -->
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-1 control-label">Email</label>
          <div class="col-sm-11">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
          </div>
        </div>
    </form>

    <!-- 校验状态 -->
    <form>
        <div class="form-group has-success">
            <label class="control-label" for="inputSuccess1">Input with success</label>
            <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
            <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
          </div>
          <div class="form-group has-warning">
            <label class="control-label" for="inputWarning1">Input with warning</label>
            <input type="text" class="form-control" id="inputWarning1">
          </div>
          <div class="form-group has-error">
            <label class="control-label" for="inputError1">Input with error</label>
            <input type="text" class="form-control" id="inputError1">
          </div>
    </form>

    <!-- 表单尺寸 -->
    <form>
        <input class="form-control input-lg" type="text" placeholder=".input-lg">
        <input class="form-control" type="text" placeholder="Default input">
        <input class="form-control input-sm" type="text" placeholder=".input-sm">
    </form>
</div>

</body>
</html>